Nekada su se web stranice na mobilnim uređajima prikazivale kao umanjena verzija desktop stranice ili su imale posebne mobilne verzije (npr. m.stranica.com).
Danas se koristi responzivni web dizajn koji omogućuje da se jedna stranica automatski prilagođava svim veličinama zaslona pomoću fluidnog rasporeda i CSS media queries.
Fiksni raspored koristi točno određene širine, npr. width: 960px, te se ne prilagođava veličini ekrana.
Fluidni raspored koristi relativne jedinice poput %, vw i vh te se prilagođava širini zaslona.
Kod fluidnog rasporeda elementi se proporcionalno smanjuju, zadržavaju međusobni odnos i sadržaj ostaje čitljiv bez horizontalnog scrollanja.
Viewport je vidljivo područje web stranice unutar preglednika. Na mobilnim telefonima je manji zbog manjeg fizičkog zaslona.
HTML tag koji se koristi:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
initial-scale=1.0 određuje početnu razinu zumiranja i sprječava automatsko povećavanje ili smanjivanje stranice.
Breakpointi:
Fiksne mjere: px, cm, mm
Varijabilne mjere: %, em, rem, vw, vh
Varijabilne mjere koriste se u responzivnom dizajnu jer omogućuju fleksibilnost i bolju čitljivost na svim uređajima.